<%--
  Created by IntelliJ IDEA.
  User: stone
  Date: 2019-08-19
  Time: 15:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <base href="${pageContext.request.contextPath}/">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <link rel="stylesheet" href="css/bootstrapcss/bootstrap.css">
    <link rel="stylesheet" href="css/front/header.css">
    <link rel="stylesheet" href="css/front/shopping-cart.css">
    <!-- Font Awesome -->
    <link href="css/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <script src="js/front-js/mzp-packed.js"></script>
    <script src="js/jquery-2.2.4.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/front-js/shopping-cart.js"></script>
    <style>
        a:hover{
            text-decoration: none;
            color: #FF5000;
        }
        #totalNumber{
            margin-left: 6px;
            color: #FF5000
        }
        .show-image img{
            margin: 0px;
        }
        .remove-product{
            color: #000000;
        }
        .remove-product:hover{
            color: #FF5000;
        }
        .down{
            float: left;
            font-size: 18px;
            color: #000000;
        }
        .up{
            float: left;
            margin-top: 2px;
            font-size: 16px;
            color: #000000;
        }
        .product-number{
            float: left;
            width:22px;
            height:20px;
            margin: 3px 5px;
            text-align: center;
            border: 1px solid #000000;
        }
        .down:link{
            text-decoration: none;
        }
        .up:link{
            text-decoration: none;
        }
        .affix{
            bottom: 1px;
        }
    </style>
    <script>
        $(function () {
            //   全选/取消全选
            $('input[name="checkAll"]').each(function () {
                $(this).click(function () {
                    var productNumber = 0;
                    if ($(this).is(':checked')) {
                        $('.jiesuan').css({"background-color":"rgb(232,43,27)"});
                        $('#jiesuan').attr('href','javascript:jiesuan()');
                        $('input[name="product"]').each(function () {
                            $(this).prop('checked', true);
                            $('input[name="checkAll"]').prop('checked', true);
                            productNumber++;
                        })
                        $('#cleanShoppingCart').attr('href','javascript:cleanCart()');
                        calculatorTotalPrice();
                    } else {
                        $('.jiesuan').css({"background-color":"rgb(159,159,159)"});
                        $('#jiesuan').removeAttr('href');
                        $('input[name="product"]').each(function () {
                            $(this).prop('checked', false);
                            $('input[name="checkAll"]').prop('checked', false);
                        })
                        calculatorTotalPrice();
                    }
                    $('#productNumber').text(productNumber);
                })
            })

            $('input[name="product"]').each(function () {
                $(this).click(function () {
                    var flag = true;
                    var isCheckOne = false;
                    var productNumber = 0;
                    var totalPrice = 0.0;
                    $('input[name="product"]').each(function () {
                        //console.log($(this).is(':checked'));
                        if($(this).is(':checked')){
                            $('#jiesuan').attr('href','javascript:jiesuan()');
                            isCheckOne = true;
                            productNumber++;
                            //console.log(this.parentNode.parentNode.parentElement.parentElement.childNodes[7].innerText);
                            var productTotalPrice = this.parentNode.parentNode.parentElement.parentElement.childNodes[7].innerText;
                            productTotalPrice = productTotalPrice.substring(1,productTotalPrice.length);
                            totalPrice += Number(productTotalPrice);
                        } else {
                            flag = false;
                        }
                    });
                    $('#productNumber').text(productNumber);
                    $('#totalPrice').text(totalPrice.toFixed(2));
                    if (productNumber == 0){
                        $('#jiesuan').removeAttr('href');
                    }
                    if (flag){
                        $('input[name="checkAll"]').prop('checked', true);
                        $('#cleanShoppingCart').attr('href','javascript:cleanCart()');
                    } else {
                        //$('#jiesuan').removeAttr('href');
                        $('input[name="checkAll"]').prop('checked', false);
                    }
                    if (isCheckOne) {
                        $('.jiesuan').css({"background-color":"rgb(232,43,27)"});
                    } else {
                        $('.jiesuan').css({"background-color":"rgb(159,159,159)"});
                    }
                })
            })
        })

        //计算总价格
        function calculatorTotalPrice() {
            var totalPrice = 0.0;
            $('input[name="product"]').each(function () {
                //console.log($(this).is(':checked'));
                if($(this).is(':checked')){

                    //console.log(this.parentNode.parentNode.parentElement.parentElement.childNodes[7].innerText);
                    var productTotalPrice = this.parentNode.parentNode.parentElement.parentElement.childNodes[7].innerText;
                    productTotalPrice = productTotalPrice.substring(1,productTotalPrice.length);
                    totalPrice += Number(productTotalPrice);
                }
            })
            $('#totalPrice').text(totalPrice.toFixed(2));
        }

        //计算单个商品价格
        function calculatorNumber(ele) {
            var productNumber = $('#productNum_' + ele).text();
            var productPrice = $('#productPrice_' + ele).text();

            var productTotalPrice = Number(productNumber) * Number(productPrice);

            $('#productTotalPrice_' + ele).text(productTotalPrice.toFixed(2));
        }

        //减少数量
        function down(ele) {
            $.ajax({
                type: 'post',
                url: 'front/shoppingCart/reduceNumber.do',
                data: {
                    prodNo: ele,
                },
                dataType: 'json',
                success: function (res) {
                    if (res) {
                        var $productNumber = $('#productNum_' + ele).text();

                        var productNumber = Number($productNumber);

                        if (productNumber > 0) {
                            $(".up").attr('disabled', 'false');
                            $('#productNum_' + ele).text(productNumber - 1);
                        } else {
                            $(".down").attr('disabled', 'false');
                        }
                        calculatorNumber(ele);
                        calculatorTotalPrice();
                    }
                }
            })


        }
        //添加数量
        function up(ele) {

            var $productNumber = $('#productNum_' + ele).text();

            //console.log($('#productNum_' + ele).parent().children(1).html());
            var productNumber = Number($productNumber);

            if (productNumber < 10) {
                $.ajax({
                    type: 'post',
                    url: 'front/shoppingCart/addNumber.do',
                    data: {
                        prodNo: ele,
                    },
                    dataType: 'json',
                    success: function (res) {
                        if (res) {


                            $(".down").attr('disabled', 'false');
                            $('#productNum_' + ele).text(productNumber + 1);
                            calculatorNumber(ele);
                            calculatorTotalPrice();
                        }
                    }
                })
            } else {
                $(".up").attr('disabled', 'true');
            }




        }
        function cleanCart() {
            $.ajax({
                type:'post',
                url:'front/shoppingCart/deleteAll.do',
                dataType: 'json',
                success: function (res) {
                    $('#cartList').fadeOut(1000);
                    //location.reload();
                    location.reload();
                }
            })
        }
        function removeProduct(prorNo) {
            $.ajax({
                type:'post',
                url:'front/shoppingCart/deleteProduct.do',
                data:{
                    prodNo:prorNo,
                },
                dataType: 'json',
                success: function (res) {
                    $('#product_' + prorNo).fadeOut(1000);
                    location.reload();
                }
            })
        }
        //结算
        function jiesuan() {
            var totalMoney = $('#totalPrice').text();
            var totalCount = $('#productNumber').text();
            location.href='../guimei/front/traOrder.jsp?totalMoney='+totalMoney+"&totalCount="+totalCount;
        }
    </script>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="clearfix">
            <div class="col-md-10 col-md-offset-1">
                <jsp:include page="header.jsp"/>
                <%--<div class="cart-top">--%>
                    <%--<div style="padding-left: 20px;padding-top: 25px">--%>
                        <%--您的位置：--%>
                        <%--<a href="#">首页</a> > <a href="#">我的淘宝</a> > 我的购物车--%>
                    <%--</div>--%>
                <%--</div>--%>
                <div class="row" style="padding: 0px 15px">
                    <div class="col-md-12" style="padding: 0px 3px 10px 3px; border-bottom: 1px solid #bbbbbb">
                        <a href="#">
                            <b style="font-size: 16px; color: #FF5000">全部商品</b>
                            <span id="totalNumber">${sessionScope.cart.size()}</span>
                        </a>
                    </div>
                </div>
                <div class="row" style="margin-top: 10px; margin-bottom: 10px">
                    <div class="col-md-1">
                        <input type="checkbox" name="checkAll" id="checkAll">&nbsp;全选
                    </div>
                    <div class="col-md-6">商品信息</div>
                    <div class="col-md-1">单价</div>
                    <div class="col-md-1">数量</div>
                    <div class="col-md-1">金额</div>
                    <div class="col-md-2">操作</div>
                </div>
                
                <div id="cartList">
                    <c:set var="productNumber" value="0"/>
                    <c:forEach var="item" items="${sessionScope.cart.values()}">

                        <div id="product_${item.product.prodNo}">
                            <div class="row" style="margin-top: 12px">
                                <div class="col-md-12" style="padding-left: 32px">
                                    <p>店铺：<span>${item.product.guimeiUsers}</span></p>
                                </div>
                            </div>
                            <div class="row"
                                 style="margin: 0px 1px; border: 1px solid #bbbbbb; background-color: rgb(251,251,251)">
                                <div class="">
                                    <div class="col-md-7 product-info" style="padding: 0px 10px">
                                        <div class="row">
                                            <div class="col-xs-1" style="padding-left: 5%; padding-top: 1%">
                                                <input type="checkbox" name="product" class="product">
                                            </div>
                                            <div class="col-xs-2">

                                                <a href="#" class="btn show-image" rel="popover" data-placement="right"
                                                   data-content="为我的网站创建一个提示框"
                                                   img-src="image/product/s_big_2.jpg">
                                                    <img src="${item.product.image}" alt="" width="60" height="70"
                                                         style="border: 1px solid #bbbbbb">
                                                </a>
                                            </div>
                                            <div class="col-xs-5" style="padding-top: 1%">
                                                <p>${item.product.descr}</p>
                                            </div>
                                            <div class="col-xs-4" style="padding-top: 1%">
                                                <p>${item.product.type}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-1" style="padding-top: 0.8%">
                                        <b>￥<span class="product-price"
                                                  id="productPrice_${item.product.prodNo}">${item.product.realPrice}</span></b>
                                    </div>
                                    <div class="col-md-1" style="padding-top: 0.6%">


                                        <a href="javascript:down('${item.product.prodNo}')" class="down"><b>-</b></a>
                                        <p id="productNum_${item.product.prodNo}" class="product-number">${item.quantity}</p>
                                        <a href="javascript:up('${item.product.prodNo}')" class="up"><b>+</b></a>

                                    </div>
                                    <div class="col-md-1" style="padding-top: 0.8%">
                                        <c:set var="productTotalPrice" value="${item.product.realPrice * item.quantity}"/>
                                        <b>￥<span id="productTotalPrice_${item.product.prodNo}"
                                                  class="product-total-price">${fn:substring(productTotalPrice, 0, fn:indexOf(productTotalPrice, ".")+3)}</span></b>
                                    </div>
                                    <div class="col-md-2" style="padding-top: 0.8%">
                                        <a href="javascript:removeProduct('${item.product.prodNo}')"
                                           class="remove-product">移除商品</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </c:forEach>
                </div>





                <div class="navbar-fixed-bottom" style="padding: 0px 19%">
                    <div class="row" style="margin: 10px 1px 0px 1px;height:38px;background-color: rgb(215,215,215)">
                        <div class="col-md-1" style="padding-top: 10px">
                            <input type="checkbox" name="checkAll" class="checkAll">
                        </div>
                        <div class="col-md-1" style="height:38px;line-height: 38px;">
                            <a  id="cleanShoppingCart" class="remove-product">删除</a>
                        </div>
                        <div class="col-md-9" style="height:38px;line-height: 38px">
                            <b style="float: right; color: #FF5000; font-size: 16px">￥<span id="totalPrice">0.00</span></b>
                            <p style="float: right">合计（不含运费）：</p>
                            <p style="float: right;margin-right: 30px">
                                已选商品
                                <b><span id="productNumber" style="color: #FF5000">0</span></b>
                                件
                            </p>
                        </div>
                        <div class="col-md-1 jiesuan" style="background-color: rgb(159,159,159); height:38px;line-height: 38px">
                            <a id="jiesuan"><p style="font-size: 20px;color: white;" class="text-center">结算</p></a>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <jsp:include page="footer.jsp"/>
    </div>
</div>


</body>
</html>